<template>
  <!-- 设置 -->
  <div slot="overlay" class="setting-container">
    <div class="map-item map-type">
      <div class="setting-title">地图类型</div>
      <div class="select-items four-px-scroll-y">
        <div
          v-for="(type, index) in mapTypeList"
          :key="`type${index}`"
          class="select-item"
          @click="changeMapType(type)"
        >
          <div
            class="item-image"
            :class="{ 'active-item': mapType === type.id }"
          >
            <img :src="`${publicPath}/img/gis/${type.image}`" />
          </div>
          <div class="item-name" :title="type.name">{{ type.name }}</div>
        </div>
      </div>
    </div>
    <div class="map-item map-layer">
      <div class="setting-title">地图层</div>
      <div class="select-items four-px-scroll-y">
        <div
          v-for="(style, index) in tilesStyleList"
          :key="`layer${index}`"
          class="select-item"
          @click="changeTileStyle(style)"
        >
          <div
            class="item-image"
            :class="{ 'active-item': tileStyle === style.id }"
          >
            <a-tooltip placement="top" :mouse-enter-delay="0.2">
              <template slot="title">
                <span>{{ style.title }}</span>
              </template>
              <img :src="`${publicPath}/img/gis/${style.image}`" />
            </a-tooltip>
          </div>
          <div class="item-name" :title="style.name">{{ style.name }}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- </a-dropdown> -->
</template>

<script lang="ts">
/**
 * gis 地图类型(底图) 地图层设置
 */
import { Component, Prop, Vue } from 'vue-property-decorator'
import { publicPath } from '@/api/constants'
import {
  mapTypesStyles,
  MapTypes,
  MapTilesStyles,
} from '@/components/knowledge-gis/map-packages/map-tiles'

@Component({
  components: {},
})
export default class MapStyleSet extends Vue {
  @Prop({ type: Number, default: 1 }) mapType!: number
  @Prop({ type: Number, default: 1 }) tileStyle!: number
  private selectMapType: number = 1 // 当前选择的地图类型
  private publicPath = publicPath
  public mapSetVisible: boolean = false
  public mapTypeList: { [key: number]: MapTypes } = mapTypesStyles
  public get tilesStyleList(): { [key: number]: MapTilesStyles } {
    return this.mapTypeList[this.mapType].tileStyle
  }
  mounted() {
    this.selectMapType = this.mapType
  }
  public changeMapType(type: any) {
    this.selectMapType = type.id
  }
  public changeTileStyle(style: any) {
    this.$emit('change-tile-style', {
      mapType: this.selectMapType,
      tileStyle: style.id,
    })
  }
}
</script>

<style scoped lang="less">
@import '@/styles/scroll-bar';

.setting-container {
  background: #fff;
  background-clip: padding-box;
  width: 100%;

  .map-item {
    height: 50%;
    // padding: 8px 0;

    .setting-title {
      color: #373b52;
      font-size: 14px;
      font-weight: 600;
      height: 32px;
      letter-spacing: 1px;
      // padding: 0 20px;
    }

    .select-items {
      display: flex;
      flex-wrap: wrap;
      height: calc(100% - 32px);
      padding: 0 6px 0 20px;
      width: 100%;

      .select-item {
        align-items: center;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        height: 62px;
        margin-bottom: 6px;
        margin-right: 30px;
        width: 44px;

        .item-image {
          align-items: center;
          background: #fff;
          border: 1px solid #e9e9e9;
          border-radius: 2px;
          box-sizing: border-box;
          display: flex;
          font-size: 38px;
          height: 44px;
          justify-content: center;
          margin-bottom: 2px;
          text-align: center;
          width: 44px;

          > img {
            border-radius: 2px;
            height: 40px;
            width: 40px;
          }
        }

        .active-item {
          border: 1px solid #6771ff;
        }

        .item-name {
          color: #5d637e;
          font-size: 12px;
          font-weight: 400;
          height: 16px;
          letter-spacing: 1px;
          overflow: hidden;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 55px;
        }
      }
    }
  }
}
</style>
